require(['./config'],()=>{
    require(['template', 'request', 'header',  'footer', 'jquery','jquerycookie'],(template, req)=>{
        class Shop{
            constructor(){
                this.init()
            }
            //从localstorage里获取数据进行渲染
            init(){
                //从localstorage里取数据
                let goods = localStorage.getItem('goods')
                if(goods){
                    this.goods = JSON.parse(goods)
                    //渲染页面
                    const html = template('shopcarTemplate',{list:this.goods})
                    $('.goodslist').html(html)
                }
                this.changeCount()
                this.choose()
                this.remove()
                this.getAccount()
            }
            // 改变数量
            changeCount() {
                const cartReduceBtns = document.querySelectorAll('.jian'),
                    cartAddBtns = document.querySelectorAll('.jia'),
                    that = this 
                for(let i = 0 ; i < cartReduceBtns.length ; i++){
                    cartReduceBtns[i].onclick = function(){
                        that.addReduce('reduce',that,this)

                    }
                    cartAddBtns[i].onclick = function(){
                        that.addReduce('add',that,this)
                    }
                }
            }
            addReduce(str,that,_this){
                // 获取 id 
                const id = $(_this).parent().attr('prod') - 0 
                
                // this.prodList 里面找到这条数据 改变他的数量
                that.goods.forEach(item => {
                    if(item.id === id){
                        if(str === 'reduce'){
                            if(item.count <= 1){
                                return 
                            }
                            item.count--
                        }else{
                            item.count++
                        }
                        // 重新保存一下数据到localStorage 
                        localStorage.setItem('goods',JSON.stringify(that.goods))
                        // 重新渲染页面
                        that.init()
                    }
                })
            }
            //全选+单选
            choose(){
                let that =this
                $('.top>.kuang').click(function(){
                    $(this).toggleClass('checked')
                    if($(this).hasClass('checked')){
                        $('.bootom').find('.checked').removeClass('checked')
                        $('.bottom>.kuang').addClass('checked')
                    }else{
                        $('.bottom>.kuang').removeClass('checked')
                    }
                    // $('.bottom>.kuang').toggleClass('checked')
                    let checked = document.querySelectorAll('.bottom .checked')
                    that.total(checked)
                })
                $('.bottom>.kuang').click(function(){
                    $(this).toggleClass('checked')
                    let checked = document.querySelectorAll('.bottom .checked')
                    
                    if(!$(this).hasClass('checked')){
                        $('.top>.kuang').removeClass('checked')
                    }else if($('.bottom>.kuang').length === checked.length){
                        $('.top>.kuang').addClass('checked')
                    }
                    // console.log($(".bottom>.kuang:not(.checked)"))
                    // if($(".bottom>.kuang:not(.checked)")){
                    //     console.log(233)
                    // }else{
                    //     console.log(555)
                    // }
                //     $.each($('.bottom>.kuang'),(index,item)=>{
                //         let arr = []
                //         arr.push(item.getAttribute('class'))
                //         for(let i =0;i<arr.length;i++){
                //             if(arr[i]!== "kuang checked"){
                //                 console.log(arr[i])
                //                 $('.top>.kuang').removeClass('checked')
                //             }else{
                //                 $('.top>.kuang').addClass('checked')
                //             }
                //         }
                //     })
                //    $('.bottom>.checked').length
                    that.total(checked)
                })
                
                let checked = document.querySelectorAll('.bottom .checked')
                this.total(checked)
            }
            //总数+总价钱（合计）
            total(checked){
                let choosecount =0
                let allprice =0
                let goods = localStorage.getItem('goods')
                goods = JSON.parse(goods)
                for(let i=0;i<checked.length;i++){
                   let id = checked[i].getAttribute('prod')-0
                   goods.forEach(item=>{
                       if(item.id===id){
                           choosecount += item.count
                           allprice += item.count*item.price
                       }
                   })
                }
                if(parseInt(allprice)<99){
                    $('section .one').css({
                        display:'block'
                    })
                    let surp = 99-parseInt(allprice)
                    $('.surplus').html(surp+'元')
                }else{
                    $('section .one').css({
                        display:'none'
                    })
                }
                $('.choosecount').html(choosecount)
                $('.allcount').html(goods.length)
                $('.allprice').html(allprice.toFixed(2))
            }
            //点击操作，删除整行
            remove(){
                let del = document.querySelectorAll('.yuan')
                for(let i=0;i<del.length;i++){
                    del[i].onclick = ()=>{
                        this.goods.splice(i,1)
                        localStorage.setItem('goods', JSON.stringify(this.goods))
                        // 重新渲染页面
                        this.init()
                    }
                }
            }
            //获取账号
            getAccount(){
                let account = $.cookie('随便')
                if(account!='null'){
                    $('.wode .account').html(account)
                }else{
                    $('.wode .account').html('<a href="/html/login.html">登录/注册</a>')
                }
            }
        }
        return new Shop()
    })
})